<template>
	<div class='home-banner'>
		<swiper :options="swiperOption">
			<swiper-slide v-for='item of bannerList' :key='item.id'>
				<img clas='bannerimg' :src='item.url' />
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		name: 'home-banner',
		data () {
			return {
				bannerList: [
					{
						"id": "01",
						"url": "https://k.sinaimg.cn/n/news/transform/310/w710h400/20190227/0MJ--htptaqf0109018.jpg/w710h340z1l1t1d2e.jpg"
					},
					{
						"id": "02",
						"url": "https://k.sinaimg.cn/n/news/transform/310/w710h400/20190227/jgEp-htptaqf0106819.jpg/w710h340z1l1t1ad5.jpg"
					},
					{
						"id": "03",
						"url": "https://k.sinaimg.cn/n/news/transform/310/w710h400/20190227/w0sb-htptaqf0111280.jpg/w710h340z1l1t10ed.jpg"
					}
				],
				swiperOption: {
					loop: true,
					autoplay: 3000,
					initialSlide: 0,
					pagination: '.swiper-pagination'
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.home-banner
		background:#ccc
		height:0
		overflow:hidden
		padding-bottom:47.88%
	img
		width:100%
</style>
